<template>
  <div class="nav-home-slider-nav">
    <van-swipe show-indicators=true indicator-color="#7658D2" height="160" loop=false>
      <van-swipe-item>
        <table>
          <tr>
            <td @click="gotoInputSearch('挂号')">
              <div class="icon-div icon_1"></div>
              <div>挂号</div>
            </td>
            <td @click="gotoInputSearch('急诊')">
              <div class="icon-div icon_2"></div>
              <div>急诊</div>
            </td>
            <td @click="gotoInputSearch('候诊')">
              <div class="icon-div icon_3"></div>
              <div>候诊</div>
            </td>
            <td @click="gotoInputSearch('药房')">
              <div class="icon-div icon_4"></div>
              <div>药房</div>
            </td>
          </tr>
          <tr>
            <td @click="gotoInputSearch('分诊')">
              <div class="icon-div icon_5"></div>
              <div>分诊</div>
            </td>
            <td @click="gotoInputSearch('缴费')">
              <div class="icon-div icon_6"></div>
              <div>缴费</div>
            </td>
            <td @click="gotoInputSearch('护士台')">
              <div class="icon-div icon_7"></div>
              <div>护士台</div>
            </td>
            <td @click="gotoInputSearch('验血')">
              <div class="icon-div icon_8"></div>
              <div>验血</div>
            </td>
          </tr>
        </table>
      </van-swipe-item>
      <van-swipe-item>
        <table>
          <tr>
            <td @click="gotoInputSearch('输液')">
              <div class="icon-div icon_9"></div>
              <div>输液</div>
            </td>
            <td @click="gotoInputSearch('取报告')">
              <div class="icon-div icon_10"></div>
              <div>取报告</div>
            </td>
            <td @click="gotoInputSearch('茶水')">
              <div class="icon-div icon_11"></div>
              <div>茶水</div>
            </td>
            <td @click="gotoInputSearch('卫生间')">
              <div class="icon-div icon_12"></div>
              <div>卫生间</div>
            </td>
          </tr>
          <tr>
            <td @click="gotoInputSearch('安全出口')">
              <div class="icon-div icon_13"></div>
              <div>安全出口</div>
            </td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </van-swipe-item>
    </van-swipe> 
  </div>
</template>
<script>
export default {
  name: "nav-home-slider-nav",
  props: ["apiUrl", "homeDepaid", "homeMapid", "homeMapname"],
  methods: {
    gotoInputSearch(name) {
      //this.$router.push({ path: "/nav-search", query: { name: name } });

      var mapObj = {
        depaid: this.homeDepaid,
        mapid: this.homeMapid,
        mapname: this.homeMapname,
        keyword: name,
        type: "search"
      };

      window.location.href =
        this.apiUrl +
        "/Router/Route3?depaid=" +
        mapObj.depaid +
        "&mapid=" +
        mapObj.mapid +
        "&mapInfo=" +
        encodeURIComponent(JSON.stringify(mapObj));
    }
  }
};
</script>
<style lang="less" >
.nav-home-slider-nav {
  table {
    min-width: 280px;
  }

  .icon_1 {
    background-image: url("../../assets/images/guahao.png");
  }

  .icon_2 {
    background-image: url("../../assets/images/jizhen.png");
  }

  .icon_3 {
    background-image: url("../../assets/images/houzhen.png");
  }

  .icon_4 {
    background-image: url("../../assets/images/yaofang.png");
  }

  .icon_5 {
    background-image: url("../../assets/images/fenzhen.png");
  }

  .icon_6 {
    background-image: url("../../assets/images/jiaofei.png");
  }

  .icon_7 {
    background-image: url("../../assets/images/hushitai.png");
  }

  .icon_8 {
    background-image: url("../../assets/images/yanxue.png");
  }

  .icon_9 {
    background-image: url("../../assets/images/shuye.png");
  }

  .icon_10 {
    background-image: url("../../assets/images/qubaogao.png");
  }

  .icon_11 {
    background-image: url("../../assets/images/chashui.png");
  }

  .icon_12 {
    background-image: url("../../assets/images/weishengjian.png");
  }

  .icon_13 {
    background-image: url("../../assets/images/anquanchukou.png");
  }
}
</style>
